import React, { useEffect, useState } from 'react'
import { Switch, Toast } from 'antd-mobile'
import { fromJS } from "immutable"
import "@/assets/css/memoire.scss"
import { useNavigate } from 'react-router-dom'

import { getUserTakings, addUserTakings } from "@/utils/dataUtil"
import { useDispatch } from 'react-redux'

import HeadBack from "@/components/HeadBack"

export default function Medication() {

    const navigate = useNavigate();

    const dispatch = useDispatch();

    //点击添加用药提醒按钮
    const clickAddMedBtn = () => {
        navigate("/add_med", {state: {type: "add"}})
    }

    //内容
    const [medList, setMedList] = useState(fromJS([]))

    //点击switch切换
    const swicthChange = (checked, index) => {
        setMedList((med) => med.set(index, med.get(index).set("warn", checked ? 1 : 0)));
        const currentItem = medList.get(index).toJS();
        currentItem.warn = checked ? 1 : 0;

        addUserTakings(index, currentItem).then(res => {
            if(res.status === 1) {
                //添加成功
                getUserTakings().then(res => {
                    if(res.status === 1) {
                        setMedList(fromJS(res.data));
                    }
                }) 
            } else {
                Toast.show({
                    content: `${res.msg}`,
                    position: 'center'
                });
            }
        })
    }

    //点击每一个用药提醒item跳转到详情页
    const clickMedItem = (item, index) => {
        const newItem = item.set("index", index);
        dispatch({
            type: "medDetailAction",
            payload: newItem
        });
        navigate("/add_med", {state: {type: "update"}})
    }

    //获取数据
    useEffect(() => {
        getUserTakings().then(res => {
            if(res.status === 1) {
                setMedList(fromJS(res.data));
            }
        }) 
    }, [])




    return (
        <div className='memContainer'>
            <HeadBack background={"#FFFFFF"} backTit={""}  isHome="back"></HeadBack>

            <div className='memUl medUl'>

                {/* 每一条用药提醒 */}
                {
                    medList.size === 0 ? (
                        <div className='memEmpty'>- 暂无数据 -</div>
                    ) : (
                        medList.map((item, index) => (
                            <div className='medLi' key={index}>
                                <div className='medLiLeft' onClick={() => clickMedItem(item, index)}>
                                    <div className='medLiTit'>{item.get('drugs')}用药提醒</div>
                                    <div className='medLiTxt'>{item.get('remark')}</div>
                                </div>
                                <div className='medLiRight'>
                                    <Switch
                                        checked={item.get("warn")}
                                        onChange={(checked) => swicthChange(checked, index)}
                                        style={{
                                            '--checked-color': '#FF612E',
                                            '--height': '0.54rem',
                                            '--width': '0.94rem',
                                            '--border-width': '4px'
                                        }}
                                    />
                                </div>
                            </div>
                        ))
                    )
                }
            </div>

            {/* 底部的按钮 */}
            <div className='memFoot'>
                <div className='memFootBtn' onClick={clickAddMedBtn}>添加用药提醒</div>
            </div>
        </div>
    )
}
